<template>
    <div  :id="elId" v-loading="wloading" element-loading-background="rgba(0, 0, 0, 0.03)" element-loading-spinner="el-icon-loading" class="container"></div>
</template>

<script>
/* eslint-disable */
import echarts from 'echarts'
//引入uuid文件
import uuid from 'uuid'
import _ from "underscore";
export default {
  name: "line-chart",
  props: { //接受父组件传递来的数据
    item: {
      type: Object,
      default() { //默认数据，没有数剧的情况下启用
        //return [{name: '生物', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}]
      }
    },
    widgetOption: {
      type: String
    },
    customConfig: {
      type: String
    },
    erd: {
      type: Object
    },
    pid: {
      type: String
    },
    i: {
      type: Number
    }
  },
  data() {
    return {
      chartObj:'',
      elId: '',
      wloading: false,
      timer:''
      // chartObj: ''
    }
  },
  created() {
    this.elId = uuid.v4() //获取随机id
  },
  computed: {
  },
  mounted() {
    const t = this;
    setTimeout(() => {
      t.$nextTick(t.renderChart())
    }, 400);
  },
  beforeDestroy() {
    console.log("--------clear chart timer-----")
    clearInterval(this.timer)
    this.timer = null
  },
  destoryed() {
    console.log("--------destoryed-----")
  },
  methods: {
    renderChart: function () {
      var that = this;
      var option = {}
      this.chartObj = echarts.init(document.getElementById(this.elId))
        var datas = {
            value: 64,
            company: "%",
            ringColor: [{
                offset: 0,
                color: '#02d6fc' // 0% 处的颜色
            }, {
                offset: 1,
                color: '#367bec' // 100% 处的颜色
            }]
        }
        option = {
            title: {
                text: datas.value + datas.company,
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#808080',
                    fontSize: '20'
                }
            },
            color: ['#282c40'],
            legend: {
                show: false,
                data: []
            },
            series: [{
                name: 'Line 1',
                type: 'pie',
                clockWise: true,
                radius: ['50%', '60%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    }
                },
                hoverAnimation: false,
                data: [{
                    value: datas.value,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: { // 完成的圆环的颜色
                                colorStops: datas.ringColor
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                }, {
                    name: '',
                    value: 100 - datas.value
                }]
            }]
        };
        that.chartObj.setOption(option)
    },
    getWidgetData() {
      this.wloading = true
      var that = this
      var request = {"user": "sss"}
      this.$http.post(`/board/board/getWidgetData/` + this.i, request).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        that.chartObj.setOption(res.data.option)
        that.wloading = false
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
    .container {
        width: 100%;
        height: 100%;
    }
</style>
